<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <div class="mode_item">
          <a-form-model-item label="告警类型">
            <j-dict-select-tag v-model="pageFilter.alarmType" placeholder="请选择" dictCode="alarmType" />
          </a-form-model-item>
          <a-form-model-item label="告警目标">
            <a-input v-model="pageFilter.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="发生日期">
            <a-range-picker
              :allowClear="true"
              v-model="rangePickerTime"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              showTime
              @change="rangePickerChange"
              style="width: 100%"
            />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
            <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
            <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <a-button style="margin-bottom:20px;" type="primary" @click="configureRule">添加目标人告警规则</a-button>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="uuid"
          :showAlert="false"
          :showSelection="false"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @change="onTableChange"
        >
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onEdit(record)" type="link" style="padding:0;">编辑</a-button>
            <a-divider type="vertical" />
            <a-button type="link" style="padding:0;" @click="handleDelete(record)">删除</a-button>
          </template>
        </custom-table>
      </div>
      <!--弹窗区域 -->
      <configureRuleModal v-if="configureBool" ref="ruleModalRef" @ok="modalFormOk" @close="modalFormClose" />
    </a-card>
  </div>
</template>

<script>
import * as api from '@/api/xlgc/alarmCenter.js'
import { getXzqhList, getDictItemsFromCache } from '@/api/api'
import { drctAlarmType } from '@/utils/tenantFilter'
import CustomTable from '@/components/zxd/Table/CustomTable'
import configureRuleModal from './components/ruleModal'
export default {
  components: {
    CustomTable,
    configureRuleModal
  },
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      show: false,
      closeTip: false,
      loading: false,
      visible: false,
      handleModalBool: false,
      isDisabled: true,
      configureBool: false,
      alarmTypeDatas: null,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '告警目标',
          dataIndex: 'name',
          width: 115,
          align: 'center'
        },
        {
          title: '告警类型',
          dataIndex: 'alarmType',
          width: 110,
          align: 'center',
          customRender: (text, record) => {
            return this.filterMultiDictText(this.alarmTypeDatas, text)
          }
        },
        {
          title: '告警区域',
          dataIndex: 'alarmLocation',
          width: 115,
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 100,
          align: 'center'
        },
        {
          title: '创建人',
          dataIndex: 'targetName',
          width: 120,
          align: 'center'
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  created() {
    this.alarmTypeDatas = drctAlarmType
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.rangePickerTime = []
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10
      }
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      api
        .configureList(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 删除
    handleDelete(record) {
      var that = this
      this.$confirm({
        title: '确认删除',
        onOk: function() {
          that.loading = true
          api
            .deleteAlarmRule(record.id)
            .then(res => {
              if (res.success) {
                // this.loading = true
                that.$message.success('删除成功！')
                that.refreshTable()
              } else {
                that.$message.warning(res.message)
              }
            })
            .catch(() => {
              that.$message.warning(res.message)
            })
        }
      })
    },
    // 弹窗成功接收
    modalFormOk(type) {
      this.onQuery()
      this.configureBool = false
    },
    modalFormClose() {
      this.configureBool = false
    },
    configureRule() {
      this.configureBool = true
      this.$nextTick(() => {
        this.$refs.ruleModalRef.add()
      })
    },
    onEdit(record) {
      this.configureBool = true
      this.$nextTick(() => {
        this.$refs.ruleModalRef.edit(record)
      })
    },
    // 告警更新时间
    rangePickerChange(date) {
      this.$set(this.pageFilter, 'startTime', date[0])
      this.$set(this.pageFilter, 'endTime', date[1])
    },
    filterMultiDictText(dictCode, text) {
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t['value'] == key)
      if (item && item.length > 0) {
        return item[0]['text']
      }
    }
  }
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  // border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 30%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 100px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
      // /deep/.area-select .area-selected-trigger {
      //   line-height: 1.15;
      // }
      // /deep/.ant-select-lg .ant-select-selection--single{
      //   height: 34px;
      // }
      // /deep/.ant-select-lg .ant-select-selection__rendered {
      //   line-height: 34px;
      //   font-size: 14px;
      // }
    }
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
</style>
